// import HeaderClass from "./components/HeaderClass";
// import MainFun from "./components/MainFun";
// import ToDoList from "./components/ToDoList/ToDoList";
// import InputClass from "./components/Input/InputClass";
// import LifeClass from "./components/Life/LifeClass";
// import ClockFun from "./components/Clock/ClockFun";
// import { useState } from "react";
// import ToDoListPubsub from "./components/ToDoListPubsub/ToDoListPubsub";
import routes from "./routes";
import "./App.css";
import { NavLink, useRoutes } from "react-router-dom";

function App() {
  // const [countParent, setCount] = useState(0);
  // const handleIncrement = () => {
  //   setCount(countParent + 1);
  // };
  // const [count, setCount] = useState(0);
  return (
    <div>
      {/* 这边是组件的父子组件传值,传值的默认值和传值的类型 */}
      {/* <HeaderClass />
      <hr></hr>
      <MainFun />
      <hr></hr> */}
      {/* <ToDoList></ToDoList> */}

      {/* <LifeClass countParent={countParent}></LifeClass>
      <p>
        <button onClick={handleIncrement}>改变props的值,触发更新</button>
      </p> */}

      {/* <InputClass></InputClass> */}
      {/* <button onClick={() => setCount(count + 1)}>加1</button>
      <hr></hr>
      {count % 2 === 0 && <ClockFun></ClockFun>}
      <p>{count}</p> */}
      {/* <ToDoListPubsub></ToDoListPubsub> */}

      <div>
        <div>
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div>
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink
                className={({ isActive }) => {
                  return isActive
                    ? "active list-group-item"
                    : "list-group-item";
                }}
                to="/about"
              >
                About
              </NavLink>
              <NavLink
                className={({ isActive }) => {
                  return isActive
                    ? "active list-group-item"
                    : "list-group-item";
                }}
                to="/home"
              >
                Home
              </NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">{useRoutes(routes)}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
